<script setup lang="ts">
import { ref } from 'vue';
import { PreferenceLog } from '../../common/types';
import { open } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';

const props = defineProps<{ data: PreferenceLog, isOpen: boolean }>();

const data = ref(props.data);

const chooseDir = async () => {
    invoke<string>("fill_path", { path: data.value.dir }).then(res => {
        choosedDirInternal(res);
    }).catch(_ => {
        choosedDirInternal(undefined);
    });

}
const choosedDirInternal = (path: string | undefined) => {
    open({
        title: "Choose Log Dir",
        multiple: false,
        directory: true,
        defaultPath: path,
        canCreateDirectories: true,
    }).then(choosed => {
        if (choosed == null) {
            return;
        }
        invoke<string>("strip_path", { path: choosed }).then(res => {
            data.value.dir = res;
        }).catch(_ => {
            data.value.dir = choosed;
        });
    });
}

</script>
<template>
    <table class="app-table-1" style="margin-top: 15px;">
        <tbody>
            <tr>
                <th>
                    Dir
                </th>
                <td>
                    <el-input v-model="data.dir" style="width:240px" :readonly="true"></el-input>
                    <el-link type="primary" @click="chooseDir" style="margin-left: 5px;" v-show="!props.isOpen">Choose
                        Dir</el-link>
                </td>
            </tr>
            <tr>
                <th>
                    File Max Size
                </th>
                <td>
                    <el-input-number class="el-input-num-text-left" v-model="data.fileMaxSize" style="width: 240px"
                        :controls="true" :value-on-clear="5120" :readonly="props.isOpen">
                        <template #suffix>
                            KB
                        </template>
                    </el-input-number>
                </td>
            </tr>
            <tr>
                <th>
                    Message Max Size
                </th>
                <td>
                    <el-input-number class="el-input-num-text-left" v-model="data.messageMaxSize" style="width: 240px"
                        :controls="true" :value-on-clear="2000" :readonly="props.isOpen">
                        <template #suffix>
                            Lines
                        </template>
                    </el-input-number>
                </td>
            </tr>
            <tr>
                <th>
                    Output Max Size
                </th>
                <td>
                    <el-input-number class="el-input-num-text-left" v-model="data.outputMaxSize" style="width: 240px"
                        :controls="true" :value-on-clear="2000" :readonly="props.isOpen">
                        <template #suffix>
                            Lines
                        </template>
                    </el-input-number>
                </td>
            </tr>
            <tr>
                <th>
                    Write Secs1
                </th>
                <td>
                    <el-checkbox v-model="data.isWriteSecs1" :disabled="props.isOpen"></el-checkbox> <span style="color:#666666;margin-left: 15px;user-select: none;">wiil auto wirte secs1 into xxxxxxx.secs1.log file</span>
                </td>
            </tr>
        </tbody>
    </table>
</template>